<template>
	<view class="qarecord" v-if="isShowPage">
		<image class="qarecord_bk_img" :src="onlinePic+'answer/qarecord_bk.png'" mode="widthFix"></image>
		<view class="qarecord_box">
			<image class="season_bk_img" :src="onlinePic+'answer/season_rank_bk.png'" mode="widthFix"></image>
			<view class="text-c f-18 c-white mt-30">{{rankinfo.title?rankinfo.title:'赛季成绩排行榜'}}</view>
			<view class="qarecord_cell_box">
				<view class="top_three_box">
					<uni-row :gutter="20">
						<uni-col :span="8">
							<view class="top_three_side" v-if="ranklist.length>0">
								<image class="top_three_bk_img" :src="onlinePic+'answer/second_bk.png'"></image>
								<view class="top_three_content">
									<view class="top_three_avatar_box">
										<image class="crown_icon" :src="onlinePic+'answer/second.png'"></image>
										<image class="top_three_avatar"
											:src="ranklist[2].avatar?picUrl+ranklist[2].avatar:onlinePic+'avatar.png'">
										</image>
										<image class="num_card_icon" :src="onlinePic+'answer/second_num.png'"></image>
									</view>
									<view class="mt-10 f-15 text-c ellipsis" style="color: #83A0BB;">{{ranklist[2].username}}
									</view>
									<view style="border-bottom:1rpx solid rgba(155, 155, 155, 0.3);margin: 8rpx 30rpx;">
									</view>
									<view class="f-12 text-c" style="color: rgba(131, 160, 187, .41);">成绩</view>
									<view class="f-14 text-c" style="color: #83A0BB;">{{ranklist[2].time}}秒</view>
								</view>
							</view>
						</uni-col>
						<uni-col :span="8">
							<view class="top_three_center" v-if="ranklist.length>0">
								<image class="top_three_bk_img" :src="onlinePic+'answer/first_bk.png'"></image>
								<view class="top_three_content">
									<view class="top_three_avatar_box">
										<image class="crown_icon" :src="onlinePic+'answer/first.png'"></image>
										<image class="top_three_avatar"
											:src="ranklist[0].avatar?picUrl+ranklist[0].avatar:onlinePic+'avatar.png'">
										</image>
										<image class="num_card_icon" :src="onlinePic+'answer/first_num.png'"></image>
									</view>
									<view class="mt-10 f-15 text-c ellipsis" style="color: #EA923D;">{{ranklist[0].username}}
									</view>
									<view style="border-bottom:1rpx solid rgba(205, 150, 80, 0.3);margin: 8rpx 30rpx;">
									</view>
									<view class="f-12 text-c" style="color: rgba(234, 146, 61, .41);">成绩</view>
									<view class="f-14 text-c" style="color: #EA923D;">{{ranklist[0].time}}秒</view>
								</view>
							</view>
						</uni-col>
						<uni-col :span="8">
							<view class="top_three_side" v-if="ranklist.length>0">
								<image class="top_three_bk_img" :src="onlinePic+'answer/third_bk.png'"></image>
								<view class="top_three_content">
									<view class="top_three_avatar_box">
										<image class="crown_icon" :src="onlinePic+'answer/third.png'"></image>
										<image class="top_three_avatar"
											:src="ranklist[1].avatar?picUrl+ranklist[1].avatar:onlinePic+'avatar.png'">
										</image>
										<image class="num_card_icon" :src="onlinePic+'answer/third_num.png'"></image>
									</view>
									<view class="mt-10 f-15 text-c ellipsis" style="color: #D2917F;">{{ranklist[1].username}}
									</view>
									<view style="border-bottom:1rpx solid rgba(210, 145, 127, 0.3);margin: 8rpx 30rpx;">
									</view>
									<view class="f-12 text-c" style="color: rgba(210, 145, 127, .41);">成绩</view>
									<view class="f-14 text-c" style="color: #D2917F;">{{ranklist[1].time}}秒</view>
								</view>
							</view>
						</uni-col>
					</uni-row>
				</view>
				<view class="seasonrank_table_head">
					<uni-row>
						<uni-col :span="5">
							<view class="text-c c-999999">排名</view>
						</uni-col>
						<uni-col :span="12">
							<view class="text-c c-999999">用户</view>
						</uni-col>
						<uni-col :span="7">
							<view class="text-c c-999999">成绩</view>
						</uni-col>
					</uni-row>
				</view>
				<view class="qarecord_cell" v-for="(item,index) in ranklist" :key="item.num" v-if="item.ranking>3">
					<uni-row>
						<uni-col :span="5">
							<view class="text-c c-999999">{{item.ranking}}</view>
						</uni-col>
						<uni-col :span="12">
							<view class="text-c c-999999 display_flex" style="justify-content: center;">
								<view class="avatar_box">
									<image class="avatar" :src="item.avatar?picUrl+item.avatar:onlinePic+'avatar.png'">
									</image>
								</view>
								<view class="ml-5 ellipsis f-13">{{item.username}}</view>
							</view>
						</uni-col>
						<uni-col :span="7">
							<view class="text-c c-999999 f-13">{{item.time}}秒</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
		</view>
		<view class="bk_bottom"></view>
	</view>
</template>

<script>
	import {
		getQaInfo,
		getSeasonRanking
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				info: '',
				rankinfo: '',
				subject_id: '',
				ranklist: [],
				isShowPage: false,
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
			};
		},
		onShow() {

		},
		onLoad(options) {
			this.subject_id = options.subject_id
			this.saeson = options.saeson
			this.channel = options.channel ? options.channel : ''
			this.getQaInfo()
			this.getSeasonRanking()
		},
		methods: {
			getQaInfo() {
				getQaInfo({
					channel: this.channel,
					subject_id: this.subject_id,
				}).then(res => {
					if (res.state == 1) {
						this.info = res.data
						uni.setNavigationBarTitle({
							title: res.data.top
						})
						this.showStart = true
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			getSeasonRanking() {
				getSeasonRanking({
					saeson: this.saeson,
					subject_id: this.subject_id,
				}).then(res => {
					if (res.state == 1) {
						this.rankinfo = res.data.info.info
						this.ranklist = res.data.info.list
						this.isShowPage = true
						var params = {
							event_code: '赛季排行榜',
							event_id: this.subject_id,
							title: '',
							value: '',
							path: 'pages/qa/seasonrank/seasonrank',
						}
						app.BurialPoint(params)
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			}
		},
		onShareAppMessage(res) {
			app.getShareTask()
			return {
				title: this.info.title ? this.info.title : '答题',
				imageUrl: this.info.share_img ? this.info.share_img : '',
				path: '/pages/qa/qastart/qastart?subject_id=' + this.subject_id + '&channel=' + this.channel
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
	}

	.qarecord {
		height: 100vh;
		position: relative;
		overflow: hidden;


		.qarecord_bk_img {
			width: 100%;
			vertical-align: middle;
		}

		.qarecord_box {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 2;
			padding: 0 30rpx 60rpx 30rpx;
			overflow: auto;

			.season_bk_img {
				width: 100%;
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				z-index: 3;
			}


			.qarecord_cell_box {
				margin-top: 36%;
				border-radius: 8rpx;
				background-color: #ffffff;

				.top_three_box {
					padding: 0 20rpx;

					.top_three_side {
						text-align: center;
						position: relative;
						margin-top: -52%;
					}

					.top_three_center {
						text-align: center;
						position: relative;
						margin-top: -65%;
					}

					.top_three_bk_img {
						width: 195rpx;
						height: 265rpx;
						vertical-align: middle;
					}

					.top_three_content {
						position: absolute;
						top: -50rpx;
						left: 0;
						right: 0;


						.top_three_avatar_box {
							width: 100rpx;
							height: 100rpx;
							position: relative;
							margin: 0 auto;

							.crown_icon {
								width: 39rpx;
								height: 35rpx;
								vertical-align: middle;
								position: absolute;
								top: -17rpx;
								left: 0;
							}

							.top_three_avatar {
								width: 100rpx;
								height: 100rpx;
								border-radius: 50rpx;
								vertical-align: middle;
							}

							.num_card_icon {
								width: 36rpx;
								height: 38rpx;
								vertical-align: middle;
								position: absolute;
								bottom: -20rpx;
								left: 0;
								right: 0;
								margin: 0 auto;
							}
						}
					}
				}

				.seasonrank_table_head {
					color: #8398AB;
					font-size: 26rpx;
					padding: 15rpx 0;
					margin-top: 20rpx;
					background-image: linear-gradient(to right, rgba(215, 244, 255, .5), #ffffff);
				}

				.qarecord_cell {
					font-size: 26rpx;
					padding: 40rpx 0;
					line-height: 36rpx;
					border-bottom: 1rpx solid rgba(0, 0, 0, .12);

					.avatar_box {
						width: 40rpx;
						height: 40rpx;

						.avatar {
							width: 40rpx;
							height: 40rpx;
							border-radius: 50px;
						}
					}
				}

				.qarecord_cell:last-child {
					border-bottom: none;
				}

				.check_info {
					color: #00A0DC;
					text-decoration: underline;
				}
			}


		}

		.bk_bottom {
			height: 230rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 1;
			background-image: linear-gradient(to top, rgba(0, 160, 220, 0.2), #f1f1f1);
		}
	}
</style>